9장 타입 변환과 단축 평가

var x = 10;
 
// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅한다.
var str = x.tostring();
console.log(typeof str, str); // string 10
 
// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

var x = 10;
 
// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
var str = x + '';
console.log(typeof str, str); // string 10
 
// x 변소의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

// 가독성의 예시
(10).toString;
10 + ''; // 자바스크립트 문법을 잘 이해하고 있는 개발자에게는 이 구문이 더욱 간결하고 이해하기 쉬울 수 있다.

// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2; // -> '102'
 
// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10'; // -> 50
 
// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0; // -> true
if (1) {
}

1 + '2'; // -> "12"

// 숫자 타입
0 + '' // -> "0"
-0 + '' // -> "0"
1 + '' // -> "1"
-1 + '' // -> "-1"
NaN + '' // -> "NaN"
Infinity + '' // -> "Infinity"
-Infinity + '' // -> "-Infinity"
 
// 불리언 타입
true + '' // -> "true"
false + '' // -> "false"
 
// null 타입
null + '' // "null"
 
// undefined 타입
undefined + '' // -> "undefined"
 
// 심벌 타입
(Symbol()) + '' // -> TypeError: Cannot convert a Symbol value to a string
 
// 객체 타입
({}) + '' // -> "[object Object]"
Math + '' // -> "[object Math]"
[] + '' // -> ""
[10, 20] + '' // -> "10, 20"
(function(){}) + '' // -> "function(){}"
Array + '' // -> "function Array() {[native code]}"

1 - '1'; // -> 0
1 * '10'; // -> 10
1 / 'one'; // -> NaN

'1' > 0; // -> true

// 문자열 타입
+'' + // -> 0
  '0' + // -> 0
  '1' + // -> 1
  'String' + // -> NaN
  // 불리언 타입
  true + // -> 1
  false + // -> 0
  // null 타입
  null + // -> 0
  // undefined 타입
  undefined + // -> NaN
  // 심벌 타입
  Symbol() + // -> TypeError: Cannot convert a Symbol value to a number
  // 객체 타입
  {} + // -> NaN
  [] + // -> 0
  [10, 20] + // -> NaN
  function () {}; // -> NaN

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
String(1); // → "1"
String(NaN); // → "NaN"
String(Infinity); // → "Infinity"
 
// 불리언 타입 => 문자열 타입
String(true); // → "true"
String(false); // → "false"
 
// 2. Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 => 문자열 타입
(1).toString(); // → "1"
NaN.toString(); // → "NaN"
Infinity.toString(); // → "Infinity"
 
// 불리언 타입 => 문자열 타입
true.toString(); // → "true"
false.toString(); // → "false"
 
// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
1 + ''; // → "1"
NaN + ''; // → "NaN"
Infinity + ''; // → "Infinity"
 
// 불리언 타입 => 문자열 타입
true + ''; // → "true"
false + ''; // → "false"

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
Number('0'); // → 0
Number('-1'); // → -1
Number('10.53'); // → 10.53
 
// 불리언 타입 => 숫자 타입
Number(true); // → 1
Number(false); // → 0
 
// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
parseInt('0'); // → 0
parseInt('-1'); // → -1
parseFloat('10.53'); // → 10.53
 
// 3. + 단항 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
+'0'; // → 0
+'-1'; // → -1
+'10.53'; // → 10.53
// 불리언 타입 => 숫자 타입
+true; // → 1
+false; // → 0
 
// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
'0' * 1; // → 0
'-1' * 1; // → -1
'10.53' * 1; // → 10.53
// 불리언 타입 => 숫자 타입
true * 1; // → 1
false * 1; // → 0

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
Boolean('x'); // → true
Boolean(''); // → false
Boolean('false'); // → true
// 숫자 타입 => 불리언 타입
Boolean(0); // → false
Boolean(1); // → true
Boolean(NaN); // → false
Boolean(Infinity); // → true
 
// null 타입 => 불리언 타입
Boolean(null); // → false
// undefined 타입 => 불리언 타입
Boolean(undefined); // → false
// 객체 타입 => 불리언 타입
Boolean({}); // → true
Boolean([]); // → true
 
// 2. ! 부정 논리 연산자를 두 번 사용하는 방법
// 문자열 타입 => 불리언 타입
!!'x'; // → true
!!''; // → false
!!'false'; // → true
// 숫자 타입 => 불리언 타입
!!0; // → false
!!1; // → true
!!NaN; // → false
!!Infinity; // → true
// null 타입 => 불리언 타입
!!null; // → false
// undefined 타입 => 불리언 타입
!!undefined; // → false
// 객체 타입 => 불리언 타입
!!{}; // → true
!![]; // → true

'Cat' && 'Dog'; // -> "Dog"

'Cat' || 'Dog'; // -> "Cat"

var done = true;
var message = '';
 
// 주어진 조건이 true일 때
if (done) message = '완료';
 
// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료

var done = false;
var message = '';
 
// 주어진 조건 false일 때
if (!done) message = '미완료';
 
// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료

var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // -> null

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}
 
getStringLength(); // → 0
getStringLength('hi'); // → 2
 
// ES6의 매개변수 기본값 설정
function getStringLength(str = '') {
  return str.length;
}
 
getStringLength(); // → 0
getStringLength('hi'); // → 2

var elem = null;
 
// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined

var str = '';
 
// 문자열의 길이(length)를 참조한다. 이때 좌항 피연산자가 false로 평가되는 Falsy 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length); // 0

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고,
// 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'defined string';
console.log(foo); // "default string"

var foo = '' ?? 'default string';
console.log(foo); // ""

console.log(1 + '2');
console.log('10' * 2);
console.log('10' - '5');
console.log('10' + 5);

if ('0') {
  console.log('A');
}
 
if (0) {
  console.log('B');
}
 
if ([]) {
  console.log('C');
}
 
if ('') {
  console.log('D');
}

console.log(+true);
console.log(+'123');
console.log(+'');
 
console.log(+null);
console.log(+undefined);

console.log('Hello' && 123);
console.log(0 && 'JavaScript');
 
console.log(null || 'default');
console.log('값 있음' || 'default');

const a = 0;
const b = '';
const c = null;
 
const v1 = a || 10;
const v2 = a ?? 10;
 
const v3 = b || 'hello';
const v4 = b ?? 'hello';
 
const v5 = c || 'world';
const v6 = c ?? 'world';
 
console.log(v1, v2);
console.log(v3, v4);
console.log(v5, v6);